<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>callmepieman.com styleguide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="dist/styles.css">
<link rel="stylesheet" href="src/docs/styleguide.css">

</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">callmepieman.com styleguide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-base.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Base</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-components.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Components</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-dependencies.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Dependencies</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-dependencies.html#kssref-dependencies-theme">
                <span class="kss-nav__ref ">3.1</span
                ><span class="kss-nav__name">Theme.</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-dependencies.html#kssref-dependencies-theme-form">
                <span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
                ><span class="kss-nav__name">Form theme</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-dependencies.html#kssref-dependencies-theme-link">
                <span class="kss-nav__ref kss-nav__ref-child">3.1.2</span
                ><span class="kss-nav__name">Link theme</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-dependencies.html#kssref-dependencies-theme-tab">
                <span class="kss-nav__ref kss-nav__ref-child">3.1.3</span
                ><span class="kss-nav__name">Tab theme</span>
              </a>
            </li>
        </ul>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-regions.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Regions</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

      <div     id="kssref-dependencies" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-dependencies">
          <span class="kss-title__ref">
              3
            <span class="kss-title__permalink-hash">
                #dependencies
            </span>
          </span>
          Dependencies
        </a>
      </h1>


      <div class="kss-description">
        <p>Dependencies are modules of the page.</p>

      </div>
    </div>


      </div>
      <section id="kssref-dependencies-theme" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme">
          <span class="kss-title__ref">
              3.1
            <span class="kss-title__permalink-hash">
                #dependencies.theme
            </span>
          </span>
          Theme.
        </a>
      </h2>


      <div class="kss-description">
        <p>Compose the theme by adding colors.</p>

      </div>
    </div>


      </section>
      <section id="kssref-dependencies-theme-form" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-form">
          <span class="kss-title__ref">
              3.1.1
            <span class="kss-title__permalink-hash">
                #dependencies.theme.form
            </span>
          </span>
          Form theme
        </a>
      </h3>


    </div>


      </section>
      <section id="kssref-dependencies-theme-form-error" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-form-error">
          <span class="kss-title__ref">
              3.1.1.1
            <span class="kss-title__permalink-hash">
                #dependencies.theme.form.error
            </span>
          </span>
          Form error theme
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form">.form
    <div class="color-black"">
        .form-error
    </div>
    <div class="form-error">
        <i class="fa fa-exclamation-triangle"></i>
        There was an error.
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form&quot;&gt;.form
    &lt;div class=&quot;color-black&quot;&quot;&gt;
        .form-error
    &lt;/div&gt;
    &lt;div class=&quot;form-error&quot;&gt;
        &lt;i class=&quot;fa fa-exclamation-triangle&quot;&gt;&lt;/i&gt;
        There was an error.
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-dependencies-theme-form-input" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-form-input">
          <span class="kss-title__ref">
              3.1.1.2
            <span class="kss-title__permalink-hash">
                #dependencies.theme.form.input
            </span>
          </span>
          Form input theme
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form color-black">.form
    <div>.form-input--tabname</div>
    <div>
        <input type="text"
            class="form-input--tabname"
            placeholder="tabname" />
    </div>

    <div>.form-input--twitch</div>
    <div>
        <input type="text"
            class="form-input--twitch"
            placeholder="twitch" />
    </div>

    <div>.form-input--kageshi</div>
    <div>
        <input type="text"
               class="form-input--kageshi""
               placeholder="kageshi" />
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form color-black&quot;&gt;.form
    &lt;div&gt;.form-input--tabname&lt;/div&gt;
    &lt;div&gt;
        &lt;input type=&quot;text&quot;
            class=&quot;form-input--tabname&quot;
            placeholder=&quot;tabname&quot; /&gt;
    &lt;/div&gt;

    &lt;div&gt;.form-input--twitch&lt;/div&gt;
    &lt;div&gt;
        &lt;input type=&quot;text&quot;
            class=&quot;form-input--twitch&quot;
            placeholder=&quot;twitch&quot; /&gt;
    &lt;/div&gt;

    &lt;div&gt;.form-input--kageshi&lt;/div&gt;
    &lt;div&gt;
        &lt;input type=&quot;text&quot;
               class=&quot;form-input--kageshi&quot;&quot;
               placeholder=&quot;kageshi&quot; /&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-dependencies-theme-form-label" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-form-label">
          <span class="kss-title__ref">
              3.1.1.3
            <span class="kss-title__permalink-hash">
                #dependencies.theme.form.label
            </span>
          </span>
          Form label theme
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form">.form
    <div class="color-black">
        .form-label .form-label--tabname
    </div>
    <label for="tabname"
           class="form-label form-label--tabname">
        <i class="fa fa-user"></i>
    </label>

    <div class="color-black">
        .form-label .form-label--twitch
    </div>
    <label for="twitch"
           class="form-label form-label--twitch">
        <i class="fa fa-twitch"></i>
    </label>

    <div class="color-black">
        .form-label .form-label--kageshi
    </div>
    <label for="kageshi"
           class="form-label form-label--kageshi">
        <i class="fa fa-comment-o"></i>
    </label>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form&quot;&gt;.form
    &lt;div class=&quot;color-black&quot;&gt;
        .form-label .form-label--tabname
    &lt;/div&gt;
    &lt;label for=&quot;tabname&quot;
           class=&quot;form-label form-label--tabname&quot;&gt;
        &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
    &lt;/label&gt;

    &lt;div class=&quot;color-black&quot;&gt;
        .form-label .form-label--twitch
    &lt;/div&gt;
    &lt;label for=&quot;twitch&quot;
           class=&quot;form-label form-label--twitch&quot;&gt;
        &lt;i class=&quot;fa fa-twitch&quot;&gt;&lt;/i&gt;
    &lt;/label&gt;

    &lt;div class=&quot;color-black&quot;&gt;
        .form-label .form-label--kageshi
    &lt;/div&gt;
    &lt;label for=&quot;kageshi&quot;
           class=&quot;form-label form-label--kageshi&quot;&gt;
        &lt;i class=&quot;fa fa-comment-o&quot;&gt;&lt;/i&gt;
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-dependencies-theme-form-submit" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-form-submit">
          <span class="kss-title__ref">
              3.1.1.4
            <span class="kss-title__permalink-hash">
                #dependencies.theme.form.submit
            </span>
          </span>
          Form submit theme
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="form">.form
    <div class="color-black">
        .form-submit
    </div>
    <input type="submit"
           class="form-submit"
           value="submit" />
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form&quot;&gt;.form
    &lt;div class=&quot;color-black&quot;&gt;
        .form-submit
    &lt;/div&gt;
    &lt;input type=&quot;submit&quot;
           class=&quot;form-submit&quot;
           value=&quot;submit&quot; /&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-dependencies-theme-link" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-link">
          <span class="kss-title__ref">
              3.1.2
            <span class="kss-title__permalink-hash">
                #dependencies.theme.link
            </span>
          </span>
          Link theme
        </a>
      </h3>


    </div>


      </section>
      <section id="kssref-dependencies-theme-link-fold" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-link-fold">
          <span class="kss-title__ref">
              3.1.2.1
            <span class="kss-title__permalink-hash">
                #dependencies.theme.link.fold
            </span>
          </span>
          Link to trigger fold
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="link">.link
    <a href="#" class="link-fold">
        .link-fold
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;link&quot;&gt;.link
    &lt;a href=&quot;#&quot; class=&quot;link-fold&quot;&gt;
        .link-fold
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-dependencies-theme-link-unfold" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-link-unfold">
          <span class="kss-title__ref">
              3.1.2.2
            <span class="kss-title__permalink-hash">
                #dependencies.theme.link.unfold
            </span>
          </span>
          Link to trigger unfold
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="link">.link
    <a href="#" class="link-unfold">
        .link-unfold
    </div>
</div>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;link&quot;&gt;.link
    &lt;a href=&quot;#&quot; class=&quot;link-unfold&quot;&gt;
        .link-unfold
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-dependencies-theme-tab" class="kss-section kss-section--depth-3">

    <div class="kss-style">
      <h3 class="kss-title kss-title--level-3">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-tab">
          <span class="kss-title__ref">
              3.1.3
            <span class="kss-title__permalink-hash">
                #dependencies.theme.tab
            </span>
          </span>
          Tab theme
        </a>
      </h3>


    </div>


      </section>
      <section id="kssref-dependencies-theme-tab-active" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-tab-active">
          <span class="kss-title__ref">
              3.1.3.1
            <span class="kss-title__permalink-hash">
                #dependencies.theme.tab.active
            </span>
          </span>
          Tab theme active link
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <ul class="empty-m">
    <li class="tab">
        .tab
        <a href="#"
           class="tab-active">.tab-active</a>
    </li>
</ul>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;empty-m&quot;&gt;
    &lt;li class=&quot;tab&quot;&gt;
        .tab
        &lt;a href=&quot;#&quot;
           class=&quot;tab-active&quot;&gt;.tab-active&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
      </div>

      </section>
      <section id="kssref-dependencies-theme-tab-link" class="kss-section kss-section--depth-4">

    <div class="kss-style">
      <h4 class="kss-title kss-title--level-4">
        <a class="kss-title__permalink" href="#kssref-dependencies-theme-tab-link">
          <span class="kss-title__ref">
              3.1.3.2
            <span class="kss-title__permalink-hash">
                #dependencies.theme.tab.link
            </span>
          </span>
          Tab theme default link
        </a>
      </h4>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <ul class="empty-m">
    <li class="tab">
        .tab
        <a href="#"
           class="tab-link">.tab-link</a>
    </li>
</ul>

        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;empty-m&quot;&gt;
    &lt;li class=&quot;tab&quot;&gt;
        .tab
        &lt;a href=&quot;#&quot;
           class=&quot;tab-link&quot;&gt;.tab-link&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
      </div>

      </section>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
